<!DOCTYPE html>
<html>
<head>
    <title>Radioactive Decay Graph</title>
</head>
<body>
    <canvas id="decayCanvas" width="600" height="500"></canvas>
    <script>
        const canvas = document.getElementById('decayCanvas');
        const ctx = canvas.getContext('2d');

        // Style parameters
        const gridColor = '#c0c0c0';
        const axisColor = 'black';
        const labelColor = 'black';
        const curveColor = 'black';
        const font = '16px Arial';
        const captionFont = 'bold 16px Arial';

        // Graph dimensions and mapping
        const margin = { top: 40, right: 20, bottom: 80, left: 90 };
        const graphWidth = canvas.width - margin.left - margin.right;
        const graphHeight = canvas.height - margin.top - margin.bottom;

        const xMin = 0;
        const xMax = 8.0;
        const yMin = 0;
        const yMax = 250;

        // Coordinate transformation functions
        function toCanvasX(x) {
            return margin.left + (x - xMin) / (xMax - xMin) * graphWidth;
        }

        function toCanvasY(y) {
            return margin.top + graphHeight - (y - yMin) / (yMax - yMin) * graphHeight;
        }

        // --- Drawing ---

        // 1. Clear canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 2. Draw Grid
        ctx.strokeStyle = gridColor;
        ctx.lineWidth = 1;

        // Vertical grid lines (every 0.2)
        ctx.beginPath();
        for (let x = xMin + 0.2; x < xMax; x += 0.2) {
            // Avoid drawing over the y-axis
            if (x > 0.01) {
                ctx.moveTo(toCanvasX(x), toCanvasY(yMin));
                ctx.lineTo(toCanvasX(x), toCanvasY(yMax));
            }
        }
        ctx.stroke();
        
        // Horizontal grid lines (every 10)
        ctx.beginPath();
        for (let y = yMin + 10; y < yMax; y += 10) {
            // Avoid drawing over the x-axis
             if (y > 0.01) {
                ctx.moveTo(toCanvasX(xMin), toCanvasY(y));
                ctx.lineTo(toCanvasX(xMax), toCanvasY(y));
            }
        }
        ctx.stroke();

        // 3. Draw Axes
        ctx.strokeStyle = axisColor;
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        // X-Axis
        ctx.moveTo(toCanvasX(xMin), toCanvasY(yMin));
        ctx.lineTo(toCanvasX(xMax), toCanvasY(yMin));
        // Y-Axis
        ctx.moveTo(toCanvasX(xMin), toCanvasY(yMin));
        ctx.lineTo(toCanvasX(xMin), toCanvasY(yMax));
        ctx.stroke();

        // 4. Draw Ticks and Labels
        ctx.fillStyle = labelColor;
        ctx.font = font;

        // X-axis ticks and labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        for (let x = 0; x <= xMax; x += 1.0) {
            ctx.fillText(x.toFixed(1), toCanvasX(x), toCanvasY(yMin) + 5);
        }

        // Y-axis ticks and labels
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        for (let y = 0; y <= yMax; y += 50) {
            ctx.fillText(y, toCanvasX(xMin) - 8, toCanvasY(y));
        }

        // 5. Draw Axis Titles
        // X-axis title
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('time / min', toCanvasX(xMin + (xMax - xMin) / 2), canvas.height - 25);

        // Y-axis title (stacked)
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
        ctx.fillText('count rate', toCanvasX(xMin) - 50, toCanvasY(yMax / 2) - 10);
        ctx.fillText('counts/min', toCanvasX(xMin) - 50, toCanvasY(yMax / 2) + 10);
        
        // 6. Draw Figure Caption
        ctx.font = captionFont;
        ctx.fillText('Fig. 11.1', toCanvasX(xMin + (xMax - xMin) / 2), canvas.height - 5);


        // 7. Draw the Decay Curve
        const dataPoints = [
            { x: 0, y: 220 }, { x: 0.5, y: 200 }, { x: 1.0, y: 180 }, 
            { x: 1.5, y: 156 }, { x: 2.0, y: 132 }, { x: 2.5, y: 120 }, 
            { x: 3.0, y: 104 }, { x: 3.5, y: 92 },  { x: 4.0, y: 82 }, 
            { x: 4.5, y: 74 },  { x: 5.0, y: 66 },  { x: 5.5, y: 60 },
            { x: 6.0, y: 54 },  { x: 6.5, y: 50 },  { x: 7.0, y: 46 },
            { x: 7.5, y: 42 }
        ];

        ctx.strokeStyle = curveColor;
        ctx.lineWidth = 2.5;
        ctx.beginPath();
        ctx.moveTo(toCanvasX(dataPoints[0].x), toCanvasY(dataPoints[0].y));
        for (let i = 1; i < dataPoints.length; i++) {
            ctx.lineTo(toCanvasX(dataPoints[i].x), toCanvasY(dataPoints[i].y));
        }
        ctx.stroke();

    </script>
</body>
</html>